<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>表单交互</title>
		<cw:base></cw:base>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resource/scripts/utils.js"></script>
		<script type="text/javascript">
			function aac147Valid(t) {
				var aac147 = Ext.getCmp(t.id).getValue();
				aac147 = aac147.replace('x', 'X');
				Ext.getCmp(t.id).setValue(aac147);
				var retmsg = Wssip.util.validateIdCard(aac147);
				if (retmsg != true) {
					Wonders.Msg.info(retmsg, '提示', function() {
						Ext.getCmp(t.id).setValue('');
						Ext.getCmp(t.id).focus();
					});
					return false;
				} else {
					return true;
				}
			}
			
			function cae004Select(t){
				if(t.value==1){
					Ext.getCmp('cac005s').setVisible(true);
					Ext.getCmp('cac006s').setVisible(true);
					Ext.getCmp('cac007s').setVisible(true);
					document.getElementById("hjinfo").style.display = "";
					
					Ext.getCmp('cac003s').setValue('440000'); // 广东省
					Ext.getCmp('cac004s').setValue('440300'); // 深圳市
					Ext.getCmp('cac005s').setValue(''); // 清空户籍区
					Ext.getCmp('cac006s').setValue(''); // 清空户籍街道
					Ext.getCmp('cac007s').setValue(''); // 清空户籍社区
					Wonders.Combo.loadLinkage('ajaxForm', 'cac003s','cac004s','cac005s');
					Ext.getCmp('ajaxForm').getForm().findField('cac003s').setReadOnly(true); // 户籍省设置为只读
					Ext.getCmp('ajaxForm').getForm().findField('cac004s').setReadOnly(true); // 户籍市设置为只读
				}else if(t.value==2){
					Ext.getCmp('cac005s').setVisible(false);
					Ext.getCmp('cac006s').setVisible(false);
					Ext.getCmp('cac007s').setVisible(false);
					document.getElementById("hjinfo").style.display = "none";
					
					Ext.getCmp('cac003s').setValue('');
					Ext.getCmp('cac004s').setValue('');
					Ext.getCmp('cac005s').setValue('');
					Ext.getCmp('cac006s').setValue('');
					Ext.getCmp('cac007s').setValue('');
					Wonders.Combo.loadLinkage('ajaxForm', 'cac003s','cac004s','cac005s');
					Ext.getCmp('ajaxForm').getForm().findField('cac003s').setReadOnly(false); // 户籍省设置为只读
					Ext.getCmp('ajaxForm').getForm().findField('cac004s').setReadOnly(false); // 户籍市设置为只读
				}
			}
			
			function cac004Select(t){
				var cae004 = Ext.getCmp('cae004').getValue();
				if(cae004=='2' && t.getValue()=='440300'){
					Wonders.Msg.info("非深户人员不可以选择深圳市，请重新选择！","提示",function (){t.setValue('');t.focus();});
				}
			}
			
			function saveClick(){
				var aac159 = Ext.getCmp("aac159").getValue();
				var tmp = aac159.replace("@","_~_");
				Ext.getCmp("aac159").setValue(tmp);
				Wonders.utils.formSubmit(Ext.getCmp("button_submit"), 'ajaxForm',
					function(form,action){
						Ext.getCmp("aac159").setValue(aac159);
						var json = Ext.decode(action.response.responseText).result[0];
						Wonders.Msg.info("保存成功！",'提示',function(){Ext.getCmp('button_submit').enable();__WSSIP_GENERATE_GUID__();});
						return false;
					},
					null,
					function(form,action){
						Ext.getCmp("aac159").setValue(aac159);
						Ext.getCmp('button_submit').enable();
						__WSSIP_FAILURE_HANLDER__(form,action);
						return false;
					}
				);
			}
			
			function query(){
				var aac147 = Ext.getCmp('aac147s').getValue();
				var cac002 = Ext.getCmp('cac002s').getValue();
				if(aac147=="" && cac002==""){
					Wonders.Msg.info('请输入<span style=\'font-weight:bold\'>查询条件</span>！', '提示');
					return;
				}else if (!aac147Valid(Ext.getCmp('aac147s'))) {
					return;
				}else {
					Ext.getCmp('ajaxForm').form.reset();
					Wonders.utils.formLoad('ajaxForm',
				    	'${pageContext.request.contextPath}/demoform/ajaxLoadForm.action',
				    	{"aac147":aac147,"cac002":cac002},
				    	function(form,action){
				    		var json = Ext.decode(action.response.responseText).result[0];
				    		Ext.getCmp("aac006").setValue(new Date(json.aac006.substr(0,4),json.aac006.substr(4,2)-1,json.aac006.substr(6)));
				    	}
				    );
				}
			}
			
			function reset(){
				Ext.getCmp('searchForm').form.reset();
				Ext.getCmp('ajaxForm').form.reset();
			}
		</script>
		<style type="text/css">
			.gridSelect-caption {
				background-color: #D0DEF0;
			}
			.required{color:red}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<b> 表单交互方式有三种：表单信息加载、表单的异步(设置ajax="true")和同步提交(设置ajax="false")</b>
			</li>
			<li>
				<b> 表单交互失败情况：后台抛出业务异常、请求参数非法、请求超时(默认30s，可设置timeout属性值修改，不推荐修改，需优化程序)、网络不稳定</b>
			</li>
		</ul>
		<br>
		<ul>
			<li>
				<b>1. 表单ajax方式加载及提交（页面不刷新） </b>
				<cw:fieldSet id="conditionFs" content="conditionDiv" title="查询条件" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="conditionDiv">
					<cw:form id="searchForm">
						<table width="98%" border="0" cellpadding="2">
							<colgroup>
								<col width='10%' align="left">
								<col width='23%' align="left">
								<col width='10%' align="left">
								<col width='23%' align="left">
								<col width='10%' align="left">
								<col width='23%' align="left">
							</colgroup>
							<tr>
								<td>
									身份证号码
								</td>
								<td>
									<cw:text id="aac147s" property="aac147" label="身份证号" maxLength="18" minLength="18" listeners="{'change':aac147Valid}" />
								</td>
								<td>
									社保电脑号
								</td>
								<td>
									<cw:text id="cac002s" property="cac002" label="社保电脑号"/>
								</td>
								<td>
									<table>
										<tr>
											<td>
												<cw:button text="查&nbsp;询" onclick="query();"></cw:button>
											</td>
											<td>&nbsp;&nbsp;</td>
											<td>
												<cw:button text="重&nbsp;置" onclick="reset();"></cw:button>
											</td>
										</tr>
									</table>
								</td>
								<td>&nbsp;</td>
							</tr>
						</table>
					</cw:form>
				</div>
				<cw:fieldSet id="resultFs" content="resultDiv" title="查询结果" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="resultDiv">
					<cw:form id="ajaxForm" url="${pageContext.request.contextPath}/demoform/ajaxSubmitForm.action" ajax="true" waitMsg="提交中，请稍候...">
						<table width="98%" border="0" cellpadding="2">
							<colgroup>
								<col width='10%' align="left">
								<col width='23%' align="left">
								<col width='10%' align="left">
								<col width='23%' align="left">
								<col width='10%' align="left">
								<col width='23%' align="left">
							</colgroup>
							<cw:text property="tmp" type="hidden"></cw:text>
							<tr>
								<td>
									身份证号码<span class="required">*</span>
								</td>
								<td>
									<cw:text id="aac147" property="aac147" label="身份证号" maxLength="18" minLength="18" required="true" listeners="{'change':aac147Valid}" />
								</td>
								<td>
									姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<span class="required">*</span>
								</td>
								<td>
									<cw:text id="aac003" property="aac003" label="姓名" required="true"/>
								</td>
								<td>
									性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别<span class="required">*</span>
								</td>
								<td>
									<cw:combobox label="性别" property="aac004" data="${applicationScope.dic['AAC004']}" emptyText="请选择..." required="true"/>
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<cw:dateField id="aac006" property="aac006" label="出生日期" />
								</td>
								<td>
									家庭电话
								</td>
								<td>
									<cw:text id="aae005" property="aae005" label="家庭电话" />
								</td>
								<td>
									移动电话
								</td>
								<td>
									<cw:number id="aac067" property="aac067" label="移动电话" allowDecimals="false" allowNegative="false" />
								</td>
							</tr>
							<tr>
								<td>
									电子邮箱
								</td>
								<td>
									<cw:text id="aac159" property="aac159" label="电子邮箱"/>
								</td>
								<td>
									&nbsp;微&nbsp;信&nbsp;号
								</td>
								<td>
									<cw:text id="cac087" property="cac087" label="微信号"/>
								</td>
								<td>
									&nbsp;&nbsp;QQ&nbsp;&nbsp;号
								</td>
								<td>
									<cw:number id="cac088" property="cac088" label="QQ号" allowDecimals="false" allowNegative="false"/>
								</td>
							</tr>
							<tr>
								<td>
									户口归属<span class="required">*</span>
								</td>
								<td>
									<cw:combobox id="cae004" property="cae004" data="[[1,'深户'],[2,'非深户']]" required="true"
										forceSelection="true" listeners="{'select':cae004Select}" label="户口归属" emptyText="请选择..."/>
								</td>
								<td>
									户&nbsp;&nbsp;籍&nbsp;省
								</td>
								<td>
									<cw:linkage id="cac003s" property="cac003" emptyText="----省----" label="户籍省" forceSelection="true"
										url="${pageContext.request.contextPath}/workspace/aa26List.action" urlParams="{codeType:'AAB301',likeMode:3,codeLike:'000000'}"/>
								</td>
								<td>
									户&nbsp;&nbsp;籍&nbsp;市
								</td>
								<td>
									<cw:linkage id="cac004s" property="cac004" emptyText="----市----" label="户籍市" forceSelection="true"
										url="${pageContext.request.contextPath}/workspace/aa26List.action?codeType=AAB301" parentField="cac003s" listeners="{'select':cac004Select}"/>
								</td>
							</tr>
							<tr id="hjinfo">
								<td>
									户&nbsp;&nbsp;籍&nbsp;区
								</td>
								<td>
									<cw:linkage id="cac005s" property="cac005" emptyText="----区/县----" label="户籍区" forceSelection="true"
										url="${pageContext.request.contextPath}/workspace/aa26List.action" 
										urlParams="{codeType:'AAB301',likeMode:1,codeLike:'440303,440304,440305,440306,440307,440308,440309,440310,440311,440312'}"/>
								</td>
								<td>
									户籍街道
								</td>
								<td>
									<cw:linkage id="cac006s" property="cac006" emptyText="----街道----" label="户籍街道" forceSelection="true"
										url="${pageContext.request.contextPath}/workspace/aa26List.action?codeType=AAB301" parentField="cac005s"/>
								</td>
								<td>
									户籍社区
								</td>
								<td>
									<cw:linkage id="cac007s" property="cac007" emptyText="----社区----" label="户籍社区" forceSelection="true"
										url="${pageContext.request.contextPath}/workspace/aa26List.action?codeType=AAB301" parentField="cac006s"/>
								</td>
							</tr>
						</table>
						<table align="center">
							<tr>
								<td>
									<cw:button text="保&nbsp存" id="button_submit" onclick="saveClick();"></cw:button>
								</td>
							</tr>
						</table>
					</cw:form>
				</div>
			</li>
			<hr>
			<li>
				<b>2. 表单也可以同步提交，设置表单属性ajax="false"(默认为true)，跳转到一个新的页面，多用于系统登录 </b>
				<cw:fieldSet id="normalFs" content="normalDiv" title="同步提交表单" collapsible="true" collapsed="false"></cw:fieldSet>
				<div id="normalDiv">
					<cw:form id="normalForm" url="${pageContext.request.contextPath}/demoform/normalSubmitForm.action" ajax="false" waitMsg="提交中，请稍候...">
						<table width="98%" border="0" cellpadding="2">
							<colgroup>
								<col width='10%' align="left">
								<col width='23%' align="left">
								<col width='10%' align="left">
								<col width='23%' align="left">
								<col width='10%' align="left">
								<col width='23%' align="left">
							</colgroup>
							<tr>
								<td>
									用&nbsp;&nbsp;户&nbsp;名
								</td>
								<td>
									<cw:text property="userName" required="true" label="用户名"/>
								</td>
								<td>
									密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码
								</td>
								<td>
									<cw:text property="userPwd" type="password" required="true" label="密码"/>
								</td>
								<td>
									<cw:formButton actionType="submit" formId="normalForm" text="登&nbsp;录"></cw:formButton>
								</td>
								<td></td>
							</tr>
						</table>
					</cw:form>
				</div>
			</li>
		</ul>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				resetHeight("formInteractionFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
